<template>
	<view class="content">
		<view class="device-view">
			<view class="rowTitle">
				<view style="height: 50rpx;width: 10rpx;background-color: #007AFF;"></view>
				<text class="text">基本信息</text>
			</view>
			<view class="alarm-view-item">
				<uni-row class="rowContent">
					<uni-col :span="5">设备名称：</uni-col>
					<uni-col :span="19">{{form.deviceName}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">在线状态：</uni-col>
					<uni-col :span="19">
						<text v-if="form.lineStatus == '0'" style="color: rgba(153, 153, 153, 1);">离线</text>
						<text v-else style="color: #07C160;">在线</text>
					</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">设备位置：</uni-col>
					<uni-col :span="19">{{form.roadLocation}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">井盖类型：</uni-col>
					<uni-col :span="19">{{form.alarmType | codeFormat(productTypeDatas)}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">告警描述：</uni-col>
					<uni-col :span="19">{{form.taskDesc}}</uni-col>
				</uni-row>
			</view>
			<view class="alarm-view-item">
				<uni-row class="rowContent">
					<uni-col :span="5">采集时间：</uni-col>
					<uni-col :span="19">{{form.createTime}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">背景角度：</uni-col>
					<uni-col :span="19">{{form.backgroundAngle}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">当前角度：</uni-col>
					<uni-col :span="19">{{form.currentAngle}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">倾斜告警：</uni-col>
					<uni-col :span="19">
						<text v-if="form.angleAlarm == '0'" style="color: #07C160;">正常</text>
						<text v-if="form.angleAlarm == '1'" style="color: #ff0000;">告警</text>
					</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">电池告警：</uni-col>
					<uni-col :span="19">
						<text v-if="form.bp == '0'" style="color: #07C160;">正常</text>
						<text v-if="form.bp == '1'" style="color: #ff0000;">告警</text>
					</uni-col>
				</uni-row>
			</view>
			<view class="alarm-view-item">
				<uni-row class="rowContent">
					<uni-col :span="5">负责人：</uni-col>
					<uni-col :span="19">{{form.responUserName}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">联系电话：</uni-col>
					<uni-col :span="19">{{form.responUserPhone}}</uni-col>
				</uni-row>
				<uni-row class="rowContent">
					<uni-col :span="5">所属区域：</uni-col>
					<uni-col :span="19">{{form.areaName}}</uni-col>
				</uni-row>
			</view>
			<view v-if="form.taskStatus != '0'" class="rowTitle">
				<view style="height: 50rpx;width: 10rpx;background-color: #007AFF;"></view>
				<text class="text">处置信息</text>
			</view>

			<view v-if="form.taskStatus != '0'" class="alarm-view-item" style="margin-bottom: 20rpx;">
				<uni-row v-if="form.repairDescTag != ''" class="rowContent">
					<uni-col :span="5">处置标签：</uni-col>
					<uni-col :span="19">{{form.repairDescTag}}</uni-col>
				</uni-row>
				<uni-row v-if="form.repairDesc != ''" class="rowContent">
					<uni-col :span="5">处置描述：</uni-col>
					<uni-col :span="19">{{form.repairDesc}}</uni-col>
				</uni-row>
				<uni-row v-if="form.repairTime != ''"  class="rowContent">
					<uni-col :span="5">处置时间：</uni-col>
					<uni-col :span="19">{{form.repairTime}}</uni-col>
				</uni-row>
				
				<view class="upload-img">
					<image v-for="(item,index) in imgUrl" :src='item'
						style="width: calc(33%); height: 100px; float: left; padding: 2px;" @click="preview(index)"></image>
				</view>
			</view>
		</view>
		<button v-if="form.taskStatus == '0'" class="add-btn" @click="goAlarm()">处理</button>
	</view>
</template>

<script>
	import { alarmTaskDelList	} from '@/api/manager'
	import { getDetail,del	} from '@/api/device.js';
	import { getList } from '@/api/lotNode.js';
	import baseUrl from '../../config/baseUrl.js';
	import { getAlarmTaskList } from '@/api/manager'
	export default {
		data() {
			return {
				id: "",
				form: {},
				productTypeDatas: [],
				queryForm: {
					imei: null,
					responUserId: uni.getStorageSync('userInfo').userId
				},

				imgUrl: []
			}
		},
		onShow() {
			this.getDetail();
			this.$http.getDicts("PRODUCT_TYPE").then(res => {
				this.productTypeDatas = res.data
			});
		},
		onLoad(options) {
			this.id = options.id;
		},

		methods: {
			//获取消息明细消息
			getDetail: function() {
				alarmTaskDelList(this.id).then((res) => {
					if (res.code == 200) {
						this.form = res.data;
						this.imgUrl = [];
						if (res.data.taskImgs != null) {
							res.data.taskImgs.forEach(item => {
								this.imgUrl.push(baseUrl.baseUrl + '/' + item.imgPath);
							})
						}
						this.queryForm.imei = res.data.imei;
					} else {
						uni.showToast({
							icon: 'none',
							title: "获取数据错误",
							duration: 2000
						});
					}
				});
			},
			/*预览图片*/
			preview(index) {
				uni.previewImage({
					current: index, //当前点击预览的图片
					urls: this.imgUrl //预览图片的链接
				})
			},

			//跳转处理页面
			goAlarm: function() {
				uni.navigateTo({
					url: '/pages/alarmTask/alarmHandle?id=' + this.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F2F6FF;
		padding-top: 16upx;
	}

	.rowTitle {
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 0rpx 20rpx;

		.text {
			font-size: 32rpx;
			color: #333333;
			margin-left: 20rpx;
		}
	}

	.device-view {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		width: 96%;
		margin: auto;
		text-align: center;
		margin-bottom: 20px;

		.alarm-view-item {
			padding: 10px;
			background-color: #FFFFFF;
			width: 97%;
			height: auto;
			margin-left: 1.5%;
			margin-top: 10px;
			border-radius: 20rpx;
			font-size: 28upx;
			text-align: left;

			.rowContent {
				padding-bottom: 10rpx;
			}

			.alarm-view-item-t {
				display: flex;
				justify-content: space-between;
				padding-bottom: 5px;
				// border-bottom: 1px solid rgba($color: #409eff, $alpha: 0.5);
			}

			.alarm-view-item-c {
				.item-c-i-t {
					margin-top: 10px;
				}

				.item-c-bm-t {
					display: flex;
					margin-left: 15px;
					margin-bottom: 20px;
					justify-content: space-between;
					align-items: left;
					color: #333333;
					font-size: 28upx;
				}
			}
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 20px);
		// height: 80upx;
		margin: 60upx auto;
		color: #fff;
		background-color: #046AFB;
		border-radius: 5px;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		font-size: 14px;
	}

	.upload-img {
		float: left;
		width: calc(100%);
		// margin-left: 10px;
	}
</style>
